<template>
	<view class="filter-pop">
		<view class="header">
			<view @tap="cancal">取消</view>
			<view>筛选设置</view>
			<view @tap="confirm">完成</view>
		</view>
		<view class="small-title">性别筛选</view>
		<view class="sex-box">
			<view :class="param.sex==null?'active':''" @tap="param.sex=null">不限</view>
			<view :class="param.sex==0?'active':''" @tap="param.sex=0">小姐姐</view>
			<view :class="param.sex==1?'active':''" @tap="param.sex=1">小哥哥</view>
		</view>
		<view class="small-title">年龄</view>

		<movable-area class="movable-area-box" ref="movableAreaRef">
			<view class="line" @tap.stop="setAge($event,'black')"></view>
			<!-- 黄线 -->
			<view class="yellow-line" :style="`left: ${yellowLineStyle.left}px; width: ${yellowLineStyle.width}px;`"
				@tap.stop="setAge($event,'yellow')">
			</view>
			<!-- 第一个点 -->
			<movable-view :damping='60' :x="oneX" class="movable-view" direction="horizontal"
				@change="move($event,'one')">
				<text class="num">{{oneAge}}</text>
			</movable-view>
			<!-- 第二个点 -->
			<movable-view :damping='60' :x="twoX" ref="twoDotRef" class="movable-view" direction="horizontal" x='100'
				@change="move($event,'two')">
				<text class="num">{{twoAge}}</text>
			</movable-view>
		</movable-area>

		<view class="fBox" style="padding-top: 60rpx;">
			<view>只要查看在线用户</view>
			<switch @change="switchChange" color="#13D449" :checked="param.isOnline" />
		</view>


		<view class="fBox">
			<view>所在地区</view>
			<view @tap="proxy.$refs.citypickerRef.open()">
				{{city_CN||'选择地区'}}
				<van-icon name="arrow" />
			</view>
			<uni-popup ref="citypickerRef" type="bottom">
				<van-picker title="选择城市" :columns="areaList"
					:columns-field-names="{ text: 'ShowName', value: 'ID', children: 'Children' }"
					@cancel="proxy.$refs.citypickerRef.close()" @confirm="handleConfirmCity" />
			</uni-popup>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		watch,
		getCurrentInstance
	} from 'vue';
	import {
		getCity,
	} from "@/api/register/index.js";
	import {
		getAuthorization
	} from "@/utils/auth.js"

	const {
		proxy
	} = getCurrentInstance();
	const emit = defineEmits(['filterConfirm']);

	let param = reactive({
		sex: null,
		cityCode: null,
		isOnline: false
	})
	const switchChange = (data) => {
		param.isOnline = data.detail.value;
	}


	// ===== 年龄选择器 start =====
	let movableAreaRef = ref();
	let twoDotRef = ref();
	let twoDot_width = 0; // 点的宽度
	let movableArea_width = 0; // 可拖动区域的宽度
	let cell_width = 0; // 每一格的宽度 (年龄)
	let cell_width_two = 0; // 每一格的宽度 (距离)
	let padding = 0;

	nextTick(() => {
		padding = movableAreaRef.value.$el.offsetLeft;
		twoDot_width = twoDotRef.value.$el.offsetWidth;
		movableArea_width = movableAreaRef.value.$el.clientWidth;
		cell_width = (movableArea_width - twoDot_width) / 32;
		twoX.value = cell_width * 18 - twoDot_width;
		cell_width_two = (movableArea_width - twoDot_width) / 1000;
	})

	let oneX = ref(0);
	let twoX = ref(0);
	let oneAge = ref(18);
	let twoAge = ref(36);

	const move = function(e, type) {
		switch (type) {
			case 'one':
				oneX.value = e.detail.x;
				oneAge.value = 18 + Math.floor(parseInt(e.detail.x) / cell_width)
				break;
			case 'two':
				twoX.value = e.detail.x;
				twoAge.value = 18 + Math.floor((parseInt(e.detail.x) + twoDot_width) / cell_width)
				break;
		}
	}

	let yellowLineStyle = reactive({
		left: 0,
		width: 0
	})
	watch([oneX, twoX], () => {
		let two_num = twoX.value + twoDot_width
		if (oneX.value >= two_num) {
			yellowLineStyle.left = two_num;
			yellowLineStyle.width = oneX.value - two_num;
		} else {
			yellowLineStyle.left = oneX.value;
			yellowLineStyle.width = two_num - oneX.value;
		}
	})

	const setAge = function(e, type) {
		let num = e.detail.x - padding;
		let two_position = twoX.value + twoDot_width;

		switch (type) {
			case 'black':
				if (oneX.value >= two_position) {
					if (num <= two_position) {
						twoX.value = num - twoDot_width;
					} else {
						oneX.value = num;
					}
				} else {
					if (num <= oneX.value) {
						oneX.value = num;
					} else {
						twoX.value = num - twoDot_width;
					}
				}
				break;
			case 'yellow':
				if (oneX.value >= two_position) {
					if (oneX.value - num <= num - two_position) {
						oneX.value = num;
					} else {
						twoX.value = num - twoDot_width;
					}
				} else {
					if (num - oneX.value <= two_position - num) {
						oneX.value = num;
					} else {
						twoX.value = num - twoDot_width;
					}
				}
				break;
		}
	}
	// ===== 年龄选择器 end =====

	const citypickerRef = ref();
	let areaList = ref([]);
	let city_CN = ref(null); // 城市的中文
	// 获取城市数据
	(
		async function() {
			let data = await proxy.$get(getCity)
			if (data.code == 200) {
				areaList.value = data.data;
				console.log(data.data);
			}
		}()
	)
	// 选择完城市
	const handleConfirmCity = (data) => {
		let temp = data.selectedOptions[1];
		city_CN.value = temp.ShowName;
		param.cityCode = temp.Code;
		citypickerRef.value.close()
	}

	// 点击完成按钮
	const confirm = () => {
		let data = JSON.parse(JSON.stringify((param)));
		if (data.sex == null) {
			delete data.sex;
		}
		if (data.cityCode == null) {
			delete data.cityCode;
		}
		if (data.isOnline == false) {
			delete data.isOnline;
		}
		if (oneAge.value >= twoAge.value) {
			data.sAge = twoAge.value;
			data.eAge = oneAge.value;
		} else {
			data.sAge = oneAge.value;
			data.eAge = twoAge.value;
		}
		emit('filterConfirm', {
			type: "success",
			data
		})
	};
	const cancal = () => {
		emit('filterConfirm', {
			type: "fail",
		})
	}
</script>

<style scoped lang="scss">
	.filter-pop {
		padding: 20rpx 20rpx 60rpx 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #262626;

			&>view:nth-of-type(1) {
				color: #999999;
			}

			&>view:nth-of-type(2) {
				font-weight: bold;
			}
		}

		.small-title {
			padding-top: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #262626;
		}


		.fBox {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>view:nth-of-type(1) {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}
		}
	}

	.sex-box {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;

		&>view {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #F1F1F1;
			border-radius: 4px;
			text-align: center;
		}

		.active {
			color: #ffffff;
			background: #262626;
		}
	}


	.movable-area-box {
		margin-top: 70rpx;
		position: relative;
		width: 100%;
		height: 34rpx;

		.movable-view {
			position: relative;
			width: 26rpx;
			height: 26rpx;
			background-color: #000000;
			border-radius: 50%;
			border: 4rpx solid #000000;

			.num {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -50rpx;
			}
		}

		.line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			width: 100%;
			height: 2px;
			background: #cccccc;
			border-radius: 1px;
		}

		.yellow-line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			height: 2px;
			background: #000000;
			border-radius: 1px;
			transition: all 50ms;
		}
	}
</style>
